<template>
    <tr class="customer-row">
      <td><img :src="customer.avatar" alt="avatar" class="avatar" /></td>
      <td>{{ customer.id }}</td>
      <td>{{ customer.cusName }}</td>
      <td>{{ customer.cusPhone }}</td>
      <td>{{ customer.cusAddress }}</td>
      <td>
        <a-button type="link" @click="manageCustomer">管理</a-button>
      </td>
    </tr>
  </template>
  
  <script>
  export default {

    name: 'CustomerRow',
    props: {
      customer: {
        type: Object,
        required: true,
      },
    },
    methods: {
      manageCustomer() {
        // 处理管理逻辑
        console.log(`管理顾客: ${this.customer.cusName}`);
        this.$router.push({ path: '/system/account_editor', query: { type: 'customer', id: this.customer.id } });
      },
    },
  };
  </script>
  
  <style scoped>
  .customer-row {
    background: rgba(50, 50, 50, 0.8); /* 暗色微透明背景 */
    backdrop-filter: blur(10px); /* 磨砂效果 */
    color: #ffffff; /* 字体颜色为白色 */
    transition: background 0.3s; /* 背景过渡效果 */
  }
  
  .customer-row:hover {
    background: rgba(70, 70, 70, 0.9); /* 悬停时稍微加深透明度 */
  }
  
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  </style>
  